<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>请假信息管理系统 -- 二级学院信息管理</title>
    <script src="../../../js/jquery.min.js"></script>
    <link href="../../../css/departmentManage/departmentManage.css" rel="stylesheet">
    <link href="../../../css/common/common.css" rel="stylesheet">
</head>
<body>
<!-- 顶部弹出提示信息容器 -->
<!--蓝色提示成功信息-->
<div id="notificationBlue" class="notificationBlue">
    <span id="messageBlue"></span>
</div>
<!--灰色提示普通信息-->
<div id="notificationGrey" class="notificationGrey">
    <span id="messageGrey"></span>
</div>
<!--黄色色提示警告信息-->
<div id="notificationYellow" class="notificationYellow">
    <span id="messageYellow"></span>
</div>
<!-- 头部 -->
<head th:insert="~{common/common::header}">
</head>
<!-- 左边 -->
<aside th:insert="~{common/common::aside}">
</aside>
<!-- 中间 -->
<main class="main">
    <div class="box">
        <div class="search-container">
            二级学院编号：<input type="text" class="search-box" placeholder="搜索..." id="searchDepId">
            二级学院名称：<input type="text" class="search-box" placeholder="搜索..." id="searchDepName">
            <button class="search-button action-button" onclick="searchDep()">搜索</button>
            <button class="reset-button action-button" onclick="reset()">重置</button>
        </div>
        <div>
            <button class="add-button action-button"  onclick="addDepartmentInfo()">新增二级学院信息+</button>
        </div>
        <table>
            <thead>
            <tr>
                <th>二级学院编号</th>
                <th>二级学院名称</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="department,departments:${pageVo.list}">
                <td th:text="${department.depID}">数据1</td>
                <td th:text="${department.depName}">数据2</td>
                <td class="action-buttons">
                    <button id="editButton" class="action-button edit-button" th:onclick="editDepartmentPage('[(${department.depID})]') " >编辑</button>
                    <button id="deleteButton" class="action-button delete-button" th:onclick="deleteDepartment('[(${department.depID})]')">删除</button>
                </td>
            </tr>
            </tbody>
        </table>

        <div class="pagination">
            <span th:text="'共'+${pageVo.getTotal()}+'条'"></span>
            <span class="page-link" id="beforePage" onclick="beforeChangePage()"> 上一页 </span>
            <span th:text="'页号：'+${pageVo.getPageNum()}"></span>
            <span class="page-link" id="afterPage" onclick="afterChangePage()"> 下一页 </span>
        </div>
    </div>
</main>
</body>

<script th:inline="javascript" type="text/javascript">
    function showNotification(id) {
        const notification = document.getElementById(id);
        notification.classList.add("show");

        setTimeout(function() {
            notification.classList.remove("show");
        }, 2000); // 3秒后自动消失
    }

    var data = [[${pageVo.list}]]
    console.log(data);

    function addDepartmentInfo(){
        window.location.href = '/department/addDepartmentPage'
    }

    var messageInfo = [[${resultInfo?.message}]];
    if(messageInfo != null){
        document.getElementById("messageBlue").innerHTML = messageInfo;
        this.showNotification("notificationBlue");
    }

    var pageNum = [[${pageVo.getPageNum()}]];
    var pageSum = [[${pageVo.pages}]];
    if(pageNum === 1){
        document.getElementById("beforePage").style.display = 'none';
    }
    if(pageNum === pageSum || pageSum === 0){
        document.getElementById("afterPage").style.display = 'none';
    }

    function beforeChangePage(){
        pageNum = parseInt(pageNum) - 1;
        window.location.href = '/department/list?pageNum='+pageNum+'&pageSize=7';
    }

    function afterChangePage(){
        pageNum = parseInt(pageNum) + 1;
        console.log(pageNum)
        window.location.href = '/department/list?pageNum='+pageNum+'&pageSize=7';
    }

    function deleteDepartment(depId){
        if(confirm("确定要删除id为"+depId+"的二级学院信息吗？")){
            window.location.href = '/department/deleteDepartmentOne?depId='+depId;
        } else {
            document.getElementById("messageGrey").innerHTML = "取消删除";
            this.showNotification("messageGrey");
        }

    }

    function outLogin(){
        location.href = '/outLogin'
    }

    function editDepartmentPage(depId){
        window.location.href = '/department/updateDepartmentPage?depId=' + depId;
    }

    function searchDep(){
        let searchDepId = document.getElementById("searchDepId").value;
        let searchDepName = document.getElementById("searchDepName").value;
        window.location.href = '/department/list?pageNum=1&pageSize=7&depID='+searchDepId+'&depName='+searchDepName
    }

    function reset(){
        document.getElementById("searchDepId").value = "";
        document.getElementById("searchDepName").value = "";
    }
</script>

</html>